<template>
  <div class="btn">
    <el-button type="primary" @click="NewStudentFile = true" class="btn">新建学生档案</el-button>
    <!--点击新建学生档案弹出表单-->
    <el-dialog title="新建学生档案" :visible.sync="NewStudentFile" width="70%">
      {{formData}}
      <el-form :model="formData" :rules="rules" ref="formData" label-width="80px" class="demo-ruleForm">
        <el-row style="margin-bottom: 20px;font-size: 20px">
          <el-col :span="1" style="color: darkgoldenrod;">1/5</el-col>
          <el-col :span="4">基本信息</el-col>
        </el-row>
        <div class="box">
          <div class="box_content">
            <el-form-item label="姓名" prop="student_name">
              <el-input v-model="formData.student_name" placeholder="请输入姓名" :value="formData.student_name"></el-input>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="性别" prop="sex">
              <el-select v-model="formData.sex" placeholder="请选择性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <!--<div class="box_content">
            <el-form-item label="民族" prop="nation">
              <el-input v-model="formData.nation" placeholder="汉"></el-input>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="国籍" prop="nationality">
              <el-input v-model="formData.nationality" placeholder="中国"></el-input>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="出生年月" prop="birthday">
              <el-date-picker type="date" placeholder="日期" v-model="formData.birthday" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </div>-->
        </div>
        <!--==========================================================================================-->
        <div class="box">
          <!--<div class="box_content">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="formData.phone" placeholder="请输入">
                <template slot="prepend">+86</template>
              </el-input>
            </el-form-item>
          </div>-->
          <div class="box_content">
            <el-form-item label="证件号码" prop="card">
              <el-input placeholder="请输入证件号码" v-model="formData.card" class="input-with-select" style="width: 400px">
                <el-select v-model="formData.card_type" slot="prepend" placeholder="请选择证件类型" style="width: 90px">
                  <el-option v-for="item in cardType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </div>
        </div>
        <!--==========================================================================================-->
        <el-row style="margin-bottom: 20px;font-size: 20px">
          <el-col :span="1" style="color: darkgoldenrod;">2/5</el-col>
          <el-col :span="4">家庭信息</el-col>
        </el-row>
        <!--==========================================================================================-->
        <div class="box">
          <div class="box_content">
            <el-form-item label="家长姓名">
              <el-input v-model="formData.home[0].parent_name" placeholder="请输入家长姓名"></el-input>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="家长称谓">
              <el-select v-model="formData.home[0].relation" placeholder="请选择称谓">
                <el-option label="爸爸" value="1"></el-option>
                <el-option label="妈妈" value="2"></el-option>
                <el-option label="爷爷" value="3"></el-option>
                <el-option label="奶奶" value="4"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="联系电话">
              <!--@blur="animate()"-->
              <el-input placeholder="请输入" v-model="formData.home[0].phone">
                <template slot="prepend">+86</template>
              </el-input>
            </el-form-item>
          </div>
        </div>
        <!--==========================================================================================-->
        <!--<div class="box">
          <div class="box_content">
            <el-form-item label="家长姓名">
              <el-input v-model="formData.MotherName" placeholder="请输入家长姓名"></el-input>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="家长称谓">
              <el-input v-model="formData.MoM"></el-input>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="联系电话">
              <el-input placeholder="请输入" v-model="formData.MotherPhone">
                <template slot="prepend">+86</template>
              </el-input>
            </el-form-item>
          </div>
        </div>-->
        <div class="box">
          <div class="box_content">
            <el-form-item label="" style="text-align: center">
              <el-button type="info">添加联系人</el-button>
            </el-form-item>
          </div>
        </div>
        <!--==========================================================================================-->
        <el-row style="margin-bottom: 20px;font-size: 20px">
          <el-col :span="1" style="color: darkgoldenrod;">3/5</el-col>
          <el-col :span="4">招生信息</el-col>
        </el-row>
        <!--==========================================================================================-->
        <div class="box">
          <div class="box_content">
            <el-form-item label="申请学期">
              <el-select class="select" v-model="formData.recruit[0].semester_id" placeholder="请选择申请学期">
                <el-option v-for="item in semester" :key="item.value" :label="item.label" :value="item.label"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="申请年级">
              <el-select class="select" v-model="formData.recruit[0].grade" placeholder="请选择申请年级">
                <el-option v-for="item in grade" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="申请课程">
              <el-select class="select" v-model="formData.recruit[0].course_id" placeholder="请选择申请课程">
                <el-option v-for="item in course" :key="item.value" :label="item.label" :value="item.label"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="所属校区">
              <el-select class="select" v-model="formData.recruit[0].school_id" placeholder="请选择校区">
                <el-option v-for="item in school" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <!--==========================================================================================-->
        <div class="box">
          <div class="box_content">
            <el-form-item label="招生来源">
              <el-select class="select" v-model="formData.recruit[0].way" placeholder="请选择招生来源">
                <el-option v-for="item in channel" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="推荐人">
              <el-input v-model="formData.recruit[0].referrer" placeholder="请输入推荐人"></el-input>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="主跟进人">
              <el-input v-model="formData.recruit[0].teacher_id" placeholder="默认当前登录账号" disabled></el-input>
            </el-form-item>
          </div>
          <div class="box_content">
            <el-form-item label="副跟进人">
              <el-select class="select" v-model="formData.recruit[0].deputy_teacher_id" placeholder="请选择">
                <el-option v-for="item in teacher2" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <!--==========================================================================================-->
        <div class="box">

          <div class="box_content">
            <el-form-item label="">
              <div class="block">
                意向度<el-rate></el-rate>
              </div>
            </el-form-item>
          </div>
        </div>
        <!--==========================================================================================-->
        <el-row style="margin-bottom: 20px;font-size: 20px">
          <el-col :span="1" style="color: darkgoldenrod;">4/5</el-col>
          <el-col :span="4">学业信息</el-col>
        </el-row>
        <!--==========================================================================================-->
        <div class="box">
          <div class="box_content2">
            <el-form-item label="曾读学校">
              <!--v-model="formData.course[0].school"-->
              <el-select class="select" v-model="formData.cousrse[0].school" placeholder="请选择申请年级">
                <el-option v-for="item in school" :key="item.value" :label="item.label" :value="item.label"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="box_content2">
            <el-form-item label="语文">
              <el-input v-model="formData.cousrse[0].Chinese" placeholder="请输入成绩"></el-input>
            </el-form-item>
          </div>
          <div class="box_content2">
            <el-form-item label="数学">
              <el-input v-model="formData.cousrse[0].Mathematics" placeholder="请输入成绩"></el-input>
            </el-form-item>
          </div>
          <div class="box_content2">
            <el-form-item label="英语">
              <el-input v-model="formData.cousrse[0].English" placeholder="请输入成绩"></el-input>
            </el-form-item>
          </div>
          <div class="box_content2">
            <el-form-item label="物理">
              <el-input v-model="formData.cousrse[0].Physics" placeholder="请输入成绩"></el-input>
            </el-form-item>
          </div>
          <div class="box_content2">
            <el-form-item label="化学">
              <el-input v-model="formData.cousrse[0].Chemistry" placeholder="请输入成绩"></el-input>
            </el-form-item>
          </div>
        </div>
        <!--==========================================================================================-->
        <div class="box">
          <div class="box_content2">
            <el-form-item label="曾读年级">
              <el-select class="select" v-model="formData.cousrse[0].grade" placeholder="请选择申请年级">
                <el-option v-for="item in grade" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="box_content2">
            <el-form-item label="历史">
              <el-input v-model="formData.cousrse[0].History" placeholder="请输入成绩"></el-input>
            </el-form-item>
          </div>
          <div class="box_content2">
            <el-form-item label="地理">
              <el-input v-model="formData.cousrse[0].Geography" placeholder="请输入成绩"></el-input>
            </el-form-item>
          </div>
          <div class="box_content2">
            <el-form-item label="政治">
              <el-input v-model="formData.cousrse[0].Politics" placeholder="请输入成绩"></el-input>
            </el-form-item>
          </div>
          <div class="box_content2">
            <el-form-item label="生物">
              <el-input v-model="formData.cousrse[0].Biology" placeholder="请输入成绩"></el-input>
            </el-form-item>
          </div>
          <div class="box_content2">
            <el-form-item label="信息科技">
              <el-input v-model="formData.cousrse[0].computer" placeholder="请输入成绩"></el-input>
            </el-form-item>
          </div>
        </div>
        <!--==========================================================================================-->
        <el-row style="margin-bottom: 20px;font-size: 20px">
          <el-col :span="1" style="color: darkgoldenrod;">5/5</el-col>
          <el-col :span="4">其他信息</el-col>
        </el-row>
        <!--==========================================================================================-->
        <el-row>
          <el-col :span="4">
            <el-form-item label="户籍地址" prop="province">
              <el-cascader
                prop="province"
                placeholder="请选择省/市/区"
                ref="cascaderCity"
                :value="cityArr"
                style="width: 300px"
                :options="options"
                :props="{
                  value: 'id',
                  label: 'name',
                  ...props
                }"
                @change="handleChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!--==========================================================================================-->
        <el-row>
          <el-col :span="24">
            <el-form-item label="地址" prop="address">
              <el-input v-model="formData.address" placeholder="请输入详细地址"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--==========================================================================================-->
        <el-row>
          <el-form-item label="备注">
            <el-input type="textarea" placeholder="请输入，不超过1000字" v-model="formData.remark" maxlength="1000" show-word-limit></el-input>
          </el-form-item>
        </el-row>
        <!--==========================================================================================-->
      </el-form>
      <!--==========================================================================================-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="NewStudentFile = false">取 消</el-button>
        <el-button type="primary" @click="resetForm('formData')">重 置</el-button>
        <el-button type="primary" @click="addStudent">确 定</el-button>
         <!--@click="NewStudentFile = false"-->
      </span>
      <!--==========================================================================================-->
    </el-dialog>
    <el-button class="btn">导入学生档案</el-button>
    <el-button class="btn">导出学员档案</el-button>
    <!--==========================================================================================-->
  </div>
</template>

<script>
  import { addStudent } from '@/api/studentRecruit.js'
  import addressData from '@/components/CascaderCity/addressData.json'
    export default {
      props: {
        getUserId:null,
        /**
         * 默认区域传入格式:
         * 非多选(props.multiple = false): 北京市/北京市/东城区
         * 多选(props.multiple = true): 北京市/北京市/东城区,广东省/广州市/天河区
         */
        value: {
          type: String,
          default: ''
        },
        /**
         * 默认是regionData
         * regionData(省市区) provinceAndCityData(省市)
         */
        optionType: {
          type: String,
          default: 'regionData',
          validator: function(value) {
            return ['regionData', 'provinceAndCityData'].indexOf(value) !== -1 // 这个值必须匹配下列字符串中的一个
          }
        },
        /**
         * 是否需要开启全国
         */
        isAddAll: {
          type: Boolean,
          default: false
        },
        placeholder: {
          type: String,
          default: ''
        },
        props: {
          type: Object,
          default() {
            return {}
          }
        }
      },
        name: 'Button',
        components:{

        },
        data(){
          return{
            /*弹出框属性*/
            NewStudentFile:false,
            /*城市级联*/
            cityArr: [],
            options: [],
            isChange: false,
            formData: {
              student_name:'',  //学生名字
              sex:null, //性别 1:男，2女
              address:'', //详细地址
              province:0,  //省
              city:0, //市
              area:0, //区
              remark:'',  //备注
              card:'',  //身份证
              card_type:null, //证件类型 1身份证
              home:[{
                student_id:0,  //学生unid
                phone:'', //电话
                parent_name:'', //家长姓名
                relation:null ,  //称谓 1:爸爸，2妈妈，3爷爷，4奶奶
              }],
              recruit:[{
                semester_id:'', //学期
                grade:null, //年级
                course_id:'', //课程
                teacher_id:this.getUserId,  //主根进人id
                student_id:0,  //学生id
                deputy_teacher_id:null, //副跟进人
                school_id:null, //所属校区id
                way:null, //来源途径 1:口碑介绍，2电话邀约，3课程邀约，4广告宣传，5网络招生
                referrer:'',  //推荐人
              }],
              cousrse:[{
                school:'',  //就读学校
                grade:null, //年级
                Chinese:null, //语文成绩
                Mathematics:null, //数学成绩
                English:null, //英语成绩
                Physics:null, //物理成绩
                Chemistry:null, //化学成绩
                Biology:null, //生物成绩
                History:null, //历史成绩
                Politics:null,  //政治成绩
                Geography:null, //地理成绩
                computer:null, //信息科技
              }]
            },
            /*证件*/
            cardType: [{
              value: 1,
              label: '身份证'
            }, {
              value: 2,
              label: '军官证'
            }],
            /*学期*/
            semester: [{
              value: '选项1',
              label: '第一学期'
            }, {
              value: '选项2',
              label: '第二学期'
            }],
            /*曾读学校*/
            school: [{
              value: 1,
              label: '一小'
            }, {
              value: 2,
              label: '二小'
            }],
            /*招生来源*/
            channel: [{
              value: 1,
              label: '网上'
            }, {
              value: 2,
              label: '专台'
            }],
            /*年级*/
            grade: [{
              value: 1,
              label: '一年级'
            }, {
              value: 2,
              label: '二年级'
            }],
            /*课程*/
            course: [{
              value: 1,
              label: '语文'
            }, {
              value: 2,
              label: '英语'
            }, {
              value: 3,
              label: '数学'
            }],
            /*副跟进人*/
            teacher2: [{
              value: 1,
              label: '陈老师'
            }, {
              value: 2,
              label: '李老师'
            }],
            /*表单验证*/
            rules: {
              student_name: [
                { required: true, message: '请输入姓名', trigger: 'blur,change' }
              ],
              sex: [
                { required: true, message: '请输入性别', trigger: 'blur,change' }
              ],
              nation: [
                { required: true, message: '请输入民族', trigger: 'blur,change' }
              ],
              nationality: [
                { required: true, message: '请输入国籍', trigger: 'blur,change' }
              ],
              birthday: [
                { required: true, message: '请选择日期', trigger: 'blur,change' }
              ],
              phone: [
                { required: true, message: '请输入联系方式', trigger: 'blur,change' }
              ],
              card: [
                { required: true, message: '请输入证件号', trigger: 'blur,change' }
                /*{pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, message: '证件号码格式有误！', trigger: 'blur','change'}*/
              ],
              province: [
                { required: true, message: '请选择省市区', trigger: 'blur,change' }
              ],
              address: [
                { required: true, message: '请输入详细地址', trigger: 'blur,change' }
              ],
              card_type: [
                { required: true, message: '请选择证件类型', trigger: 'blur,change' }
              ]
            }
            /*======================================================================*/
          }
        },
      watch: {
        value(val) {
          if (this.isChange) {
            this.isChange = false
          } else {
            this.setDefaultCity()
            const panel = this.$refs.cascaderCity.$refs.panel
            panel.clearCheckedNodes() // 清空级联选择器选中状态
            panel.activePath = [] // 清除高亮
          }
        }
      },
      created() {
        this.setDefaultCity()
        this.init()
        /*默认证件类型*/
        this.formData.card_type = this.cardType[0].value
      },
      methods: {
        /*animate(){
          var re = /^1\d{10}$/;
          let str = this.phoneValue;
          if(re.test(str)){
            alert('成功')
          }else {
            alert('抱歉手机号不合法')
          }
        },*/
        /*添加学生*/
        async addStudent() {
          console.log(this.formData)
          let resData = await addStudent(this.formData)
          console.log(resData)
          if(resData.code == 200){
            this.$message.success('添加成功！')
          }else {
            this.$message.error('添加失败！')
          }
        },
        /*提交*/
        /*submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              addStudent(this.formData)
              this.NewStudentFile = false
            } else {
              /!*this.$message.error('添加成功！')*!/
              return false;
            }
          });
        },*/
        /*重置*/
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        /**
         * 初始化数据已选的数据
         */
        setDefaultCity() {
          // 判断是否有默认区域再判断是否开启多选
          const value = JSON.parse(JSON.stringify(this.value))
          let data = []
          if (value !== '' && typeof value === 'string') {
            if (this.props.multiple) {
              data = value.split(',').map(item => {
                return this.handleDefaultRegion(item)
              })
            } else {
              data = this.handleDefaultRegion(value)
            }
          }
          this.cityArr = data
        },
        /**
         * 字符串拆分出数组
         */
        handleDefaultRegion(value) {
          return value.split('/')
        },
        /**
         * 将数组拼接回字符串
         */
        handleRegionStr(value) {
          let str = ''
          value.forEach(item => {
            str += item + '/'
          })
          return str.slice(0, str.length - 1)
        },
        /**
         * 初始化省市区数据
         */
        init() {
          const cityData = JSON.parse(JSON.stringify(addressData)) // 避免JSON源被改变
          if (this.isAddAll) {
            cityData.unshift({ id: 0, name: '全国' }) // 插入全国选项
          }
          switch (this.optionType) {
            case 'regionData': // 省市区
              this.options = cityData
              break
            case 'provinceAndCityData': // 省市
              this.options = cityData.map(item => {
                if (item.children) {
                  item.children.map(item1 => {
                    item1.children = null // 删除一个最后个区
                    return item1
                  })
                }
                return item
              })
              break
            default:
              console.error('请选择正确的optionType！')
              break
          }
        },
        handleChange(event) {
          this.$emit('change', event)
          this.cityArr = event
          let str = ''
          if (this.props.multiple) { // 多选
            event.forEach(item => {
              str += this.handleRegionStr(item) + ','
            })
            str = str.slice(0, str.length - 1)
          } else {
            str = this.handleRegionStr(event)
          }
          this.isChange = true
          this.$emit('input', str)
          console.log('选中:', event)
          this.formData.province = event[0]
          this.formData.city = event[1]
          this.formData.area = event[2]
        }
      }
    }
</script>

<style scoped>
  .btn{
    margin-bottom: 15px;
  }
  .selectForm >>> .el-form-item__label {
    font-size: 17px;
  }
  .btn{
    margin-bottom: 10px;
    margin-right: 10px;
    margin-left: 0px;
  }
  .box{
    width: 100%;
    display: flex;
    flex-direction: row;
    /*//两侧对齐*/
    justify-content:space-between;
    /*//自动换行*/
    flex-wrap: wrap;
    /*//清除上下行的中间空隙*/
    align-content: flex-start;
  }
  .box_content{
    flex: 30 240px;
  }
  .box_content2{
    flex: 30 0 200px;
  }
  /*//解决最后一行的问题*/
  .box:after{
    content: '';
    width: 30%;
  }
</style>
